<template>
    <div class="login_container">
        <span class=" myicon"><i class="el-icon-loading"></i></span>
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box" @click="drawer = true">
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 表单 -->
            <el-form  ref="loginFormRef" label-width= "0px" :model="loginForm" :rules="loginFormRules">
                <el-form-item class="user-box" prop='username'>
                    <el-input class="user" v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
                </el-form-item>
                <el-form-item class="pas-box" prop='password'>
                    <el-input class="pas" type='password' v-model="loginForm.password" prefix-icon="el-icon-key"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="info" class="fr btn-reset" v-on:click= "resetLoginForm">重置</el-button>
                    <el-button type="success" class="fr" v-on:click="login()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-radio-group v-model="direction" v-show="false">
         <el-radio label="ltr">从左往右开</el-radio>
        </el-radio-group>
        <el-drawer
        title=""
        :visible.sync="drawer"
         :direction="direction"
        :before-close="handleClose"
        class="drawer-box">
        <div>
        <h3 class="caption-box">
            <el-button type="primary" :loading="true">创建中</el-button>
        </h3>
        <el-form ref="reForm" v-bind:rules= "reFormRules" :model="reForm" label-width="80px" class="reg-box">
            <el-form-item label="用户名" prop='username'>
            <el-input v-model="reForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop='password'>
            <el-input type='password' v-model="reForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" autocomplete="off" v-model="reForm.assignpassword"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop='email'>
            <el-input type= 'email' v-model= 'reForm.email'></el-input>
            </el-form-item>
            <el-form-item label="电话" prop='tel'>
            <el-input type='tel' v-model= "reForm.tel"></el-input>
            </el-form-item>
            <el-form-item label="是否登录">
            <el-switch  v-model= 'reForm.isLogin'></el-switch>
            </el-form-item>
            <el-form-item label="用户描述">
            <el-input type="textarea" v-model= "reForm.textarea"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" v-on:click= 'register()'>立即注册</el-button>
            <el-button @click="resetregisterForm('reForm')">重置</el-button>
            <el-button v-on:click= "closedrawer()">取消</el-button>
            </el-form-item>
        </el-form>
        </div>
        </el-drawer>
    </div>
</template>

<script>
export default {
        data: function () {
            var validatePass2 = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请再次输入密码'))
            } else if (value !== this.reForm.password) {
               callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
      return {
          // 表单数据绑定
          loginForm: {
              username: 'fuxiangyou',
              password: '123456'
          },
          reForm: {
              username: '',
              password: '',
              email: '',
              tol: '',
              isLogin: true,
              textarea: '',
              assignpassword: ''
          },
          reFormRules: {
              username: [
                  { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
                  { required: true, message: '请输入用户名', trigger: 'blur' }
              ],
              password: [
                  { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' },
                  { required: true, message: '请输入密码', trigger: 'blur' }
              ],
              email: [
                  { type: 'email', required: true, message: '您的邮箱格式有误！', trigger: 'blur' }
              ],
              tel: [
                  { type: 'number', required: true, message: '您的电话格式有误！', trigger: 'blur' }
              ],
              checkPass: [
                 { validator: validatePass2, trigger: 'blur' }
              ]
          },
          // 表单验证绑定
          loginFormRules: {
              username: [
                  { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
                  { required: true, message: '请输入用户名', trigger: 'blur' }
              ],
              password: [
                  { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' },
                  { required: true, message: '请输入密码', trigger: 'blur' }
              ]
          },
          drawer: false,
          direction: 'rtl'
      }
  },
  methods: {
    resetregisterForm: function (formName) {
        this.$refs[formName].resetFields()
        this.reForm.username = ''
        this.reForm.password = ''
        this.reForm.email = ''
        this.reForm.tol = ''
        this.reForm.textarea = ''
        this.reForm.assignpassword = ''
    },
    closedrawer: function () {
        this.drawer = !this.drawer
    },
    handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
    },
    resetLoginForm: function () {
        // 取消所有得验证消息非取消验证表单
        this.$refs.loginFormRef.resetFields()
        this.loginForm.username = ''
        this.loginForm.password = ''
    },
    login: function () {
        this.$refs.loginFormRef.validate((valid) => {
            if (valid) {
                this.$http.post('login', this.loginForm).then((result) => {
                    console.log(result)
                    if (result.data.meta.status !== 400) {
                        this.$message({
                             message: '恭喜你，登录成功!',
                             type: 'success'
                        })
                        const tokenvalue = result.data.data.token
                        window.sessionStorage.setItem('token', tokenvalue)
                        alert(sessionStorage.token)
                        this.$router.push('/home')
                        window.setTimeout(function () {
                            document.querySelector('.login_box').style.opacity = 1
                            document.querySelector('.myicon').style.visibility = 'hidden'
                        }, 2000)
                    } else {
                        this.$message({
                           message: '警告，您得信息有误!',
                        type: 'warning'
                         })
                        window.setTimeout(function () {
                            document.querySelector('.login_box').style.opacity = 1
                            document.querySelector('.myicon').style.visibility = 'hidden'
                        }, 2000)
                    }
                })
                document.querySelector('.login_box').style.opacity = 0.2
                document.querySelector('.myicon').style.visibility = 'visible'
            } else {
                return 0
            }
        })
    },
    register: function () {
        this.$notify({
          title: '警告',
          message: '暂时无法创建，请稍后重试！',
          type: 'warning',
          offset: 200
        })
    }
  }
}
</script>

<style lang="less" scoped>
.login_container{
    .reg-box{
        width: 400px;
        margin-top: 20px;
        margin-left: 70px;
    }
    .caption-box{
        margin: 0 0  0 230px;
    }
    width: 100%;
    height: 100%;
    overflow: hidden;
  background-color: #2b4b6b;
  .myicon{
      visibility: hidden;
      display: block;
      width: 50px;
      height: 50px;
      font-size: 80px;
      color: blanchedalmond;
      position: absolute;
      top: (50%-5px);
      left: (50%-1px);
      z-index: 1;
      transform: translate(-50%,-50%);
  }
  .login_box{
      width:400px ;
      height: 300px;
      background-color: rgb(253, 249, 249);
    //   margin: 250px auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      box-shadow: 0px 0px 20px rgb(54, 49, 49);
      box-sizing: border-box;
      padding-top: 75px;
      .avatar_box{
          height: 0;
      }
      .avatar_box img{
         position: relative;
         left: 50%;
         transform: translate(-50%,-130%);
         height: 130px;
      }
      .btn-reset{
          margin: 0 30px;
      }
      .user,.pas{
      }
      .user-box,
      .pas-box{
          box-sizing: border-box;
          padding: 0 30px;
          margin-bottom: 33px;
      }
  }
}
</style>
